<!--
 * steps外层容器
 * @param value  当前激活步骤
 * @param direction  容器方向 - <horizontal> or <vertical> 纵向和竖向
 * @param background  容器背景色
 * @param slot        插槽
 * @example  <steps v-model="active" direction="`horizontal`" background="`var(--prev-bg-white)`" @click-step="clickStep">子容器</steps>
 * @returns provide 和 inject  选项应该是一个对象或返回一个对象的函数 <实现跨级访问祖先或者多层级组件数据>
-->
<template>
  <div :class="'custom-steps--' + direction"
       :style="{ 'background-color': background }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "fatherSteps",
  props: {
    // 绑定的值
    value: {
      type: [String, Number, Boolean]
    },
    module: {
      prop: "value",
      event: "handlerValue"
    },
    // active: { // 当前激活的步骤
    //   type: Number,
    //   default: 0
    // },
    direction: {
      // 容器方向
      type: String,
      validator (value) {
        return ["horizontal", "vertical"].find((e) => e === value);
      },
      default: "horizontal"
    },
    background: {
      // 容器背景颜色
      type: String,
      default: "var(--prev-bg-white)"
    }
  },
  computed: {
    active: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit("handlerValue", val);
      }
    }
  },
  provide () {
    return {
      direction: this.direction,
      active: this.active
    };
  }
};
</script>

<style lang="scss" scoped>
.custom-steps--horizontal {
  display: flex;
}

.custom-steps--vertical {
  display: flex;
  flex-direction: column;
}
</style>
